import React,{useState} from 'react'
import {Col,Card,Button,Modal,Input,notification} from 'antd'
import {nanoid} from 'nanoid'
export default function Publish() {
    const { TextArea } = Input;
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [modalDetail,setModalDetail]=useState(false)
    const [titleValue,setTitleValue]=useState('')
    const [msgValue,setMsgValue]=useState('')
    const [valueArr,setValueArr]=useState([])
    const [detailObj,setDetailObj]=useState({})
    function showModal  ()  {
       setIsModalVisible(true);
     };
     //   消息发布
     function handleOk ()  {
         if(!titleValue||!msgValue){
            notification.open({
                description:
                  '请完整输入！',
              });
              return 
         }
         const newArr=[...valueArr]
         const newTitleObj={id:nanoid(),title:titleValue,msg:msgValue}
         newArr.push(newTitleObj)
        setValueArr(newArr)
        setTitleValue('')
        setMsgValue('')
       setIsModalVisible(false);
       console.log(valueArr);
     };
     //   取消消息发布
     function handleCancel  (){
        setTitleValue('')
       setIsModalVisible(false);
     };
   //   保存消息
    function handleSave(){
       setIsModalVisible(false);
    }
    // 获得输入的标题
    function getTitle(e){
        setTitleValue(e.target.value)
    }
    // 获得输入的文本框
    function getMsg(e){
        setMsgValue(e.target.value)
    }
   //   查看消息
    function viewMsg(id){
            return (e)=>{
                e.preventDefault()
                 const newArr= valueArr.filter((item)=>{
                    return item.id===id
                })
                console.log(newArr);
                setDetailObj(newArr[0])
                setModalDetail(true)
            }
          
       }
    //    关闭详情框
    function   closeDetail(){
        setModalDetail(false)
       }
    return (
        <>
             <Col span={12} style={{height:'30vh'}}>
                    <Card title="公告消息" bordered={true} style={{height:'30vh'}}>
                    <Button type="primary" onClick={showModal} className="right">
                         发布消息
                    </Button>
                        {   
                            valueArr.map((item)=>{
                                return  <div key={item.id}>
                                    <a href="./" onClick={viewMsg(item.id)} >{item.title}</a>                             
                                     </div> 
                            })
                        }
                        {/* 详情框 */}
                         <Modal title="Basic Modal" visible={modalDetail}  onCancel={closeDetail} onOk={closeDetail}>                           
                                 <h4 className="center">标题：{detailObj.title}</h4> 
                                 <p>时间：{new Date().toLocaleDateString()}</p>
                                 <p>内容: {detailObj.msg}</p>                                                            
                            </Modal>
                      {/* 输入弹出框 */}
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}    footer={[
                            <Button key="publish" onClick={handleOk}>
                            发布
                            </Button>,
                            <Button key="save" type="primary" onClick={handleSave} >
                            保存
                            </Button>,
                            <Button
                            key="back"                   
                            type="primary"
                            onClick={handleCancel}
                            >
                                取消
                            </Button>,
          ]}>
                     <div>
                    
                         <h3>标题</h3> <Input placeholder="请输入标题(最多可输入十五字)" onChange={getTitle} value={titleValue} maxLength="15"/>
                     </div>
                     <div>
                         <h3>内容</h3> <TextArea rows="8" col="10" onChange={getMsg} value={msgValue} maxLength="1000" placeholder="请输入内容(最多可输入一千字）"></TextArea>
                     </div>
                   </Modal>
                    </Card>
                </Col>
        </>
    )
}
